<a href="https://github.com/2fdevs/videogular/edit/master/app/scripts/com/2fdevs/videogular/plugins/vg-controls/vg-controls.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/2fdevs/videogular/blob/6f55d80/app/scripts/com/2fdevs/videogular/plugins/vg-controls/vg-controls.js#L27" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">vgControls</code>
<div><span class="hint">directive in module <code ng:non-bindable="">com.2fdevs.videogular.plugins.controls</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="com-2fdevs-videogular-plugins-controls-directive-page com-2fdevs-videogular-plugins-controls-directive-vgcontrols-page"><p>This directive acts as a container and you will need other directives to control the media.
Inside this directive you can add other directives like vg-play-pause-button and vg-scrub-bar.</p>
<pre class="prettyprint linenums">
&lt;videogular vg-theme="config.theme.url"&gt;
   &lt;vg-media vg-src="sources"&gt;&lt;/vg-media&gt;

   &lt;vg-controls vg-autohide='config.autohide' vg-autohide-time='config.autohideTime'&gt;&lt;/vg-controls&gt;
&lt;/videogular&gt;
</pre>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage">as element:<pre class="prettyprint linenums">&lt;vg-controls
       vg-autohide="{boolean=false}"
       vg-autohide-time="{number=2000}"&gt;
&lt;/vg-controls&gt;</pre>
<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>vgAutohide</td><td><a href="" class="label type-hint type-hint-boolean">boolean=false</a></td><td><div class="com-2fdevs-videogular-plugins-controls-directive-page com-2fdevs-videogular-plugins-controls-directive-vgcontrols-page"><p>Boolean variable or value to activate autohide.</p>
</div></td></tr><tr><td>vgAutohideTime</td><td><a href="" class="label type-hint type-hint-number">number=2000</a></td><td><div class="com-2fdevs-videogular-plugins-controls-directive-page com-2fdevs-videogular-plugins-controls-directive-vgcontrols-page"><p>Number variable or value that represents the time in milliseconds that will wait vgControls until it hides.</p>
</div></td></tr></tbody></table></div>
</div>
